<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm email-lp-account">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('收件人')" prop="emailUser">
            <div>
              <el-tag
                v-for="tag in form.emailUser"
                :key="tag"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="inputVisible"
                ref="saveTagInput"
                v-model="inputValue"
                class="input-new-tag"
                size="small"
                style="width: 250px;"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('邮件内容')" prop="emailMsg">
            <EditorTxt v-if="!loading" v-model="form.emailMsg" :height="300" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="display: inline-flex;position: absolute;bottom: 20px;right: 20px;">
      <save-btn :save-btn-name="$t('确定')" />
    </div>
  </div>
</template>

<script>
import { lpAccountEmailGetByLpId, lpAccountEmailGetMsg, saveLpPortalAccountEmail } from '@/api/fund/lpBase/lpBase'
import EditorTxt from '@/components/Tinymce'
export default {
  components: {
    EditorTxt
  },
  props: {},
  data() {
    return {
      loading: false,
      form: {},
      rules: {},
      inputVisible: false,
      inputValue: undefined
    }
  },
  watch: {},
  created() {
  },
  methods: {
    init(data, lpId) {
      data.lpIdTemp = lpId
      if (lpId) {
        this.loading = true
        lpAccountEmailGetByLpId(lpId).then(response => {
          if (response.data === null) {
            this.reset(data)
            this.getMsg(data)
          } else {
            this.form = response.data
            this.getMsg(data)
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.reset(data)
        this.getMsg()
      }
    },
    getMsg(data) {
      lpAccountEmailGetMsg().then(response => {
        var context = response.data
        context = context.replace('${userName}', data.email)
        context = context.replace('${nickName}', data.lpNameTemp)
        context = context.replace('${password}', this.isEmpty(data.password) ? '' : (' 密码: ' + data.password))
        this.form.emailMsg = context
        this.loading = false
      })
    },
    /** 重置表单 **/
    reset(data) {
      this.form = {
        id: undefined,
        lpId: data.lpIdTemp,
        emailUser: [],
        emailMsg: undefined
      }
      if (data.emailTemp) {
        if (data.emailTemp.includes('@')) {
          this.form.emailUser = [data.emailTemp]
        }
      }
      this.resetForm('form')
    },
    /**
     * 校验必填
     */
    checkRequired() {
      var saveStatus = true
      if (this.isEmpty(this.form.emailUser)) {
        this.msgError(this.$t('收件人不能为空'))
        saveStatus = false
      }
      if (this.isEmpty(this.form.emailMsg)) {
        this.msgError(this.$t('邮件内容不能为空'))
        saveStatus = false
      }
      return saveStatus
    },
    /** 取消按钮 **/
    cancel() {
      this.$parent.$parent.lpAccountEmailOpen = false
    },
    /** 关闭form页面 **/
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.lpAccountEmailOpen !== undefined) {
        this.$parent.$parent.lpAccountEmailOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid && this.checkRequired()) {
          this.loading = true
          saveLpPortalAccountEmail(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('正在发送邮件'))
              this.$emit('submitAccountStart', true)
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 删除某个收件人
     */
    handleClose(tag) {
      this.form.emailUser.splice(this.form.emailUser.indexOf(tag), 1)
    },
    /**
     * 打开新增收件人
     */
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    /**
     * 添加收件人
     */
    handleInputConfirm() {
      var inputValue = this.inputValue
      if (inputValue) {
        this.checkEmail(inputValue, inputValue)
      } else {
        this.inputVisible = false
        this.inputValue = ''
      }
    },
    /** 校验邮箱格式 **/
    checkEmail(email, inputValue) {
      if (email.includes('@')) {
        var email2 = email.split('@')
        if (email2.length === 2) {
          if (email2[1].includes('.')) {
            this.form.emailUser.push(inputValue)
            this.inputVisible = false
            this.inputValue = ''
          } else {
            this.msgError(this.$t('邮箱格式不正确'))
          }
        } else {
          this.msgError(this.$t('邮箱格式不正确'))
        }
      } else {
        this.msgError(this.$t('邮箱格式不正确'))
      }
    }
  }
}
</script>

<style scoped>
 .email-lp-account {
   padding: 20px;
 }
 /deep/ .dataForm .el-row .el-form-item__content {
   margin-right: -30px !important;
 }
</style>
